@use 'core' as *;

.text-2xs {
    font-size: var(--text-fs-2xs);
    line-height: var(--text-lh-2xs);
}

h6#{$selector-exclude-grid},
.text-xs {
    font-size: var(--text-fs-xs);
    line-height: var(--text-lh-xs);
}

h5#{$selector-exclude-grid},
.text-sm {
    font-size: var(--text-fs-sm);
    line-height: var(--text-lh-sm);
}

h4#{$selector-exclude-grid},
.text-base {
    font-size: var(--text-fs-base);
    line-height: var(--text-lh-base);
}

h3#{$selector-exclude-grid},
.text-lg {
    font-size: var(--text-fs-lg);
    line-height: var(--text-lh-lg);
}

h2#{$selector-exclude-grid},
.text-xl {
    font-size: var(--text-fs-xl);
    line-height: var(--text-lh-xl);
}

h1#{$selector-exclude-grid},
.text-2xl {
    font-size: var(--text-fs-2xl);
    line-height: var(--text-lh-2xl);
}

.text-3xl {
    font-size: var(--text-fs-3xl);
    line-height: var(--text-lh-3xl);
}

h1#{$selector-exclude-grid},
h2#{$selector-exclude-grid},
h3#{$selector-exclude-grid},
h4#{$selector-exclude-grid},
h5#{$selector-exclude-grid},
h6#{$selector-exclude-grid} {
    color: var(--color-fg-primary);
}

h1#{$selector-exclude-grid},
h2#{$selector-exclude-grid},
h3#{$selector-exclude-grid},
h4#{$selector-exclude-grid},
h5#{$selector-exclude-grid},
h6#{$selector-exclude-grid},
b#{$selector-exclude-grid},
strong#{$selector-exclude-grid},
.bold-text {
    font-weight: var(--text-semibold);
}

.monospace-text {
    font-family: var(--text-monospace-font-family);
}

h1:where(:not(:last-child)),
h2:where(:not(:last-child)),
h3:where(:not(:last-child)),
h4:where(:not(:last-child)),
h5:where(:not(:last-child)),
h6:where(:not(:last-child)) {
    margin-bottom: $spacing-size-4;
}

p:where(:not(:last-child)),
ul:where(:not(:last-child)),
ol:where(:not(:last-child)),
blockquote:where(:not(:last-child)) {
    margin-bottom: $spacing-size-5;
}
